<!--
  -    内容管理
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-del="rowDel"
      >
        <template
          slot="url"
          slot-scope="scope"
        >
          <img
            @click="showImg(scope.row.url)"
            v-if="scope.row.url"
            :src="scope.row.url"
            style="width:50px;height:50px;cursor: pointer;"
          />
        </template>
        <template
          slot="menuLeft"
          slot-scope="scope"
        >
          <el-button
            v-if="information_content_add"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            @click="addOrUpdateHandle('add','')"
          >
            新增
          </el-button>
        </template>
        <template
          slot="msgStatus"
          slot-scope="scope"
        >
          <!-- {{scope.row.msgStatus?'启用':'禁用'}} -->
          <el-tag
            type="info"
            v-if="scope.row.msgStatus"
          >启用</el-tag>
          <el-tag
            type="warning"
            v-else
          >禁用</el-tag>
        </template>
        <template
          slot="menu"
          slot-scope="scope"
        >
          <!--<el-button v-if="information_content_get"
                 type="text"
                 icon="el-icon-view"
                 @click="handleView('view',scope.row.id)">
        查看
      </el-button>-->
          <el-button
            v-if="information_content_edit"
            type="text"
            @click="addOrUpdateHandle('edit',scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="information_content_del"
            type="text"
            @click="rowDel(scope.row,scope.index)"
          >
            删除
          </el-button>
          <el-button
            v-if="information_content_del"
            type="text"
            @click="enable(scope.row,scope.index)"
          >
            {{scope.row.msgStatus?'禁用':'启用'}}
          </el-button>
        </template>
      </avue-crud>
      <table-form
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="refreshDataList"
      ></table-form>
    </basic-container>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcList"
    />
  </div>
</template>

<script>
import { fetchList, getObj, addObj, putObj, delObj, enable } from '@/api/information/content/person'
import { tableOption } from '@/const/crud/information/content/person'
import TableForm from './Form'
import { mapGetters } from 'vuex'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'rmproject',
  components: { TableForm, ElImageViewer },
  data () {
    return {
      srcList: [],
      showViewer: false,
      searchForm: {
        msgType: 3
      },
      tableData: [{ url: 'http://47.108.49.61:9000/xiexin/9f4aa511-7d12-4cab-b2fe-d56122ff76c24545.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20201027%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20201027T085042Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=a633f74e5627f84db14afbf8333d85f481a0b646bc8684cae089dedd507cb80f' }],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      addOrUpdateVisible: false,
      information_content_get: false,
      information_content_add: false,
      information_content_edit: false,
      information_content_del: false,
    }
  },
  created () {
    this.information_content_get = this.permissions['information_content_get']
    this.information_content_add = this.permissions['information_content_add']
    this.information_content_edit = this.permissions['information_content_edit']
    this.information_content_del = this.permissions['information_content_del']
  },
  computed: {
    ...mapGetters(['elements', 'permissions'])
  },
  methods: {
    closeViewer () {
      this.showViewer = false
    },
    showImg (ImgList) {
      this.srcList = []
      this.showViewer = true
      this.srcList.push(ImgList.split(','))
    },
    enable (row) {
      enable({
        id: row.id,
        msgStatus: row.msgStatus ? 0 : 1
      }).then(res => {
        this.getList(this.page)
      })
    },
    refreshDataList () {
      this.getList(this.page)
    },
    getList (page, params) {
      this.tableLoading = true
      fetchList(Object.assign({
        current: this.page.currentPage,
        msgType: 3,
        size: this.page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除此条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    //新增、修改
    addOrUpdateHandle (isEdit, id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(isEdit, id)
      })
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange (current) {
      this.page.currentPage = current
    },
    searchChange (form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    refreshChange () {
      this.getList(this.page)
    }
  }
}
</script>
